<!DOCTYPE html>
<html lang="en">
  <head>
    <script type="module">
      import { h, text, app } from "./hyperapp.js"

      const AddTodo = (state) => ({
        ...state,
        todos: state.todos.concat(state.value),
      })

      const NewValue = (state, event) => ({
        ...state,
        value: event.target.value,
      })

      app({
        init: { todos: [], value: "" },
        view: ({ todos, value }) =>
          h("main", {}, [
            h("input", { type: "text", oninput: NewValue, value }),
            h("button", { onclick: AddTodo }, text("Add")),
            h("ul", {},
              todos.map((todo) => h("li", {}, text(todo)))
            ),
          ]),
        node: document.getElementById("app"),
      })
    </script>
  </head>
  <body>
    <main id="app"></main>
  </body>
</html>
